//填单报修
import React, { Component } from 'react'
import './fill-service.scss'
import { Cell, Input, FilePicker, Icon, Toast, Badge, Button } from 'zarm'
export default class FillService extends Component {
  state = {
    value: '',
    files: []
  }
  componentDidMount() {
    window.document.title = "用户报修"
  }
  setContent = (value) => { this.setState({ value }) }
  onSelect = (selFiles) => {
    const { files } = this.state
    const newFiles = files.concat(selFiles);
    if (newFiles.length > 5) {
      Toast.show('最多只能选择5张图片');
      return;
    }
    this.setState({ files: newFiles });
  };

  remove = (index) => {
    const { files } = this.state
    const newFiles = [].concat(files);
    newFiles.splice(index, 1);
    this.setState({ files: newFiles });
    Toast.show('删除成功');
  };
  imgRender = () => {
    const { files } = this.state
    return files.map((item, index) => {
      return (
        <Badge
          key={+index}
          className="file-picker-item"
          shape="circle"
          text={
            <span className="file-picker-closebtn">
              <Icon type="wrong" />
            </span>
          }
          onClick={() => this.remove(index)}
        >
          <div className="file-picker-item-img">
            <a href={item.thumbnail} target="_blank" rel="noopener noreferrer">
              <img src={item.thumbnail} alt="" />
            </a>
          </div>
        </Badge>
      );
    });
  };

  render() {
    const { value, files } = this.state
    return (
      <div className="fill">
        <div style={{ height: '16px' }}></div>
        <Cell
          hasArrow
          title="报修方式"
          description="填单报修"
          className="za"
          onClick={() => { }}
        />
        <Cell
          title="姓名"
          description="张强&#8195;&#8194;"
          onClick={() => { }}
        />
        <Cell
          title="电话"
          description="18137545749&#8195;&#8194;"
          onClick={() => { }}
        />
        <Cell
          hasArrow
          title="位置"
          description="一号楼/102室"
          onClick={() => { }}
        />
        <div className="desc">
          <div className="desc_title">问题描述</div>
          <Input
            type="text"
            rows={6}
            placeholder="说点什么吧..."
            value={value}
            onChange={this.setContent}
          />
          <div className="file-picker-wrapper">
            {this.imgRender()}
            {files.length < 5 && (
              <FilePicker
                multiple
                className="file-picker-btn"
                accept="image/*"
                onChange={this.onSelect}
              >
                <Icon type="add" size="lg" />
              </FilePicker>
            )}
          </div>
        </div>
        <div className="btn">
        <Button theme="primary" block shape="round">提交</Button>
        </div>
      </div>
    )
  }
}
